<template>
    <div class="container-fluid">

        <div class="row">
            <div class="col-sm-6 col-lg-3">
                <div class="card bg-primary">
                    <div class="card-body clearfix">
                        <div class="pull-right">
                            <p class="h4 text-white m-t-0">今日文章分享次数</p>
                            <p class="h3 text-white m-b-0">{{articleShareNum}}</p>
                        </div>
                        <div class="pull-left"><span class="img-avatar img-avatar-48 bg-translucent"><i
                                class="mdi mdi-currency-cny fa-1-5x"></i></span></div>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-lg-3">
                <div class="card bg-danger">
                    <div class="card-body clearfix">
                        <div class="pull-right">
                            <p class="h4 text-white m-t-0">今日视频分享次数</p>
                            <p class="h3 text-white m-b-0">{{videoShareNum}}</p>
                        </div>
                        <div class="pull-left"><span class="img-avatar img-avatar-48 bg-translucent"><i
                                class="mdi mdi-account fa-1-5x"></i></span></div>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-lg-3">
                <div class="card bg-success">
                    <div class="card-body clearfix">
                        <div class="pull-right">
                            <p class="h4 text-white m-t-0">今日文章访问次数</p>
                            <p class="h3 text-white m-b-0">{{ articleViewNum }}</p>
                        </div>
                        <div class="pull-left"><span class="img-avatar img-avatar-48 bg-translucent"><i
                                class="mdi mdi-arrow-down-bold fa-1-5x"></i></span></div>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-lg-3">
                <div class="card bg-purple">
                    <div class="card-body clearfix">
                        <div class="pull-right">
                            <p class="h4 text-white m-t-0">今日视频访问次数</p>
                            <p class="h3 text-white m-b-0">{{ videoViewNum }} </p>
                        </div>
                        <div class="pull-left"><span class="img-avatar img-avatar-48 bg-translucent"><i
                                class="mdi mdi-comment-outline fa-1-5x"></i></span></div>
                    </div>
                </div>
            </div>
        </div>


    </div>
</template>

<script>
    export default {
        name: "DashboardComponent",
        data() {
            return {
                articleShareNum: 0,
                articleViewNum: 0,
                videoShareNum: 0,
                videoViewNum: 0,
            }
        },
        methods: {
            getSummary: function () { //统计数据
                let self = this;
                let uri = "stat";
                axios.get(uri).then(function (result) {
                    var data = result.data;
                    self.articleShareNum = data.articleShareNum;
                    self.articleViewNum = data.articleViewNum;
                    self.videoShareNum = data.videoShareNum;
                    self.videoViewNum = data.videoViewNum;
                });
            },
        },
        created: function () {
            this.getSummary();
        }
    }


    /*new Swiper('.banner', {
        loop: true, //循环模式选项
        autoplay: {
            delay: 3000,//10秒滚动
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.next',
            prevEl: '.prev',
        },
    });*/
</script>

<style scoped>
    .banner {
        overflow: hidden;
    }
</style>
